<template>
  <div class="w1200 hospital_detail_page">
    <!-- 面包屑 开始 -->
    <div class="breadcrumb">
      <el-breadcrumb
        class="el_breadcrumb"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          ><nuxt-link to="/home">首页</nuxt-link></el-breadcrumb-item
        >
        <!-- <el-breadcrumb-item>{{ $cookies.get('city')||'全国'  }}</el-breadcrumb-item> -->
        <el-breadcrumb-item
          ><nuxt-link to="/hospital"
            >{{ $cookies.get("city") || "全国" }}医院</nuxt-link
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ hospital.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑 end -->

    <!-- 基础信息 开始 -->
    <div class="base_info">
      <!-- 轮播图 开始 -->
      <UserCarousel :list="getImages(surroundings.surroundingsPic)" />
      <!-- 轮播图 end -->

      <!-- 文字信息 开始 -->
      <div class="text_info">
        <div class="top">
          <!-- 标题 开始 -->
          <div class="title">
            <div class="name">
              <span>{{ hospital.name }}</span>
              <img
                src="@/assets/images/rz.png"
                class="rz"
                alt=""
                v-if="hospital.hasCertified == 1"
              />
            </div>
            <div
              class="attention"
              :class="oInfo.followedStatus == 1 ? 'attentioned' : ''"
              @click="attention"
            >
              <img
                src="@/assets/images/focus.png"
                class="img"
                alt="关注"
                v-if="oInfo.followedStatus == 2"
              />
              <span>{{ oInfo.followedStatus == 2 ? "关注" : "已关注" }}</span>
            </div>
          </div>
          <!-- 标题 end -->
          <!-- 标签、评分、评价 开始 -->
          <div class="label_score">
            <div class="labels_list">
              <template v-for="(item, index) in hospital.featuredLabels || []">
                <div
                  class="label"
                  :class="getClassName(index)"
                  :key="`label_${index}`"
                  v-if="index < 3"
                >
                  {{ item.name }}
                </div>
              </template>
            </div>

            <div class="score_box">
              <div class="score">
                <!-- <el-rate v-model="hospital.initScore" class="li_rate" disabled allow-half></el-rate> -->
                <li-rate v-model="hospital.initScore" disabled></li-rate>
              </div>
              <div class="review">{{ commentsList.length }}条评价</div>
            </div>
          </div>
          <!-- 标签、评分、评价 end -->

          <!-- 预约、点评、医生人数 开始 -->
          <div class="person_box">
            <img src="@/assets/images/smile.png" class="img" alt="" />
            <span class="num">{{ $fomartRate(totalScore.scoreOverall) }}</span>
            <span class="line">/</span>
            <span>医生人数</span>
            <span class="num">{{ doctorList.length }}</span>
            <span class="line">/</span>
            <span>预约人数</span>
            <span class="num">{{ hospital.initAppointmentCnt }}</span>
            <span class="line">/</span>
            <span>点评人数</span>
            <span class="num">{{ commentsList.length }}</span>
          </div>
          <!-- 预约、点评、医生人数 end -->

          <!-- 更多信息 开始 -->
          <div class="more_info">
            <div class="cell">
              <span class="name">擅长项目</span>
              <div class="txt" :title="hospital.expertProjectNames">
                {{ hospital.expertProjectNames }}
              </div>
            </div>
            <div class="cell introduction_cell">
              <span class="name">医院简介</span>
              <div class="txt" :title="hospital.introduce">
                {{ hospital.introduce }}
              </div>
            </div>
            <div class="cell">
              <span class="name">营业时间</span>
              <div class="txt" :title="hospital.businessTime">
                {{ hospital.businessTime }}
              </div>
            </div>
            <div class="cell">
              <span class="name">所在位置</span>
              <div class="txt">
                {{ hospital.provinceName }}{{ hospital.cityName
                }}{{ hospital.districtName }}{{ hospital.address }}
              </div>
            </div>
          </div>
          <!-- 更多信息 end -->
        </div>

        <div class="btn_box">
          <nuxt-link
            :to="`/appoint?source=hospital&id=${hospitalId}`"
            class="btn"
            >免费预约</nuxt-link
          >
          <!-- <el-button type="primary" class="btn" @click="goBook"
            >免费预约</el-button
          > -->
        </div>
      </div>
      <!-- 文字信息 end -->
    </div>
    <!-- 基础信息 end -->

    <!-- 内容 开始 -->
    <div class="content">
      <!-- 左侧内容 开始 -->
      <div class="left_box">
        <!-- 优惠活动 开始 -->
        <div class="activity_box">
          <TabMenus :list="tabbarList" @change="onTabbarChange" />

          <div class="row_box" ref="tabbar_0">
            <div class="row_head">优惠活动</div>
            <div class="row_content">
              <div class="goods_list">
                <DetailGoods
                  v-for="(item, index) in goodsList"
                  :key="`goods_${index}`"
                  :info="item"
                  :hospital-id="hospitalId"
                />
              </div>
            </div>
          </div>
        </div>
        <!-- 优惠活动 end -->

        <!-- 医院信息 开始 -->
        <div class="row_box" ref="tabbar_1">
          <div class="row_head">医院信息</div>
          <div class="row_content">
            <div class="hospital_info">
              <div class="cell">
                <span class="name">成立时间：</span>
                <div class="txt">{{ hospital.establishDate }}年</div>
              </div>
              <div class="cell">
                <span class="name">门店面积：</span>
                <span class="txt">{{ hospital.outpatientArea || "--" }}㎡</span>
              </div>
              <div class="cell">
                <span class="name">诊室个数：</span>
                <span class="txt"
                  >{{ hospital.outpatientRootCnt || "--" }}间</span
                >
              </div>
              <div class="cell">
                <span class="name">牙椅数量：</span>
                <span class="txt">{{ hospital.toothChairCnt || "--" }}张</span>
              </div>
              <!-- <div class="cell">
                <span class="name">门店人数：</span>
                <span class="txt">10人</span>
              </div> -->
              <div class="cell">
                <span class="name">医保政策：</span>
                <span class="txt">{{
                  hospital.medicalInsurancePolicy == 1
                    ? "支持医保"
                    : "不支持医保"
                }}</span>
              </div>
              <div class="cell">
                <span class="name">机构类别：</span>
                <span class="txt">{{ hospital.className || "--" }}</span>
              </div>
              <div class="cell">
                <span class="name">营业时间：</span>
                <span class="txt">{{ hospital.businessTime || "--" }}</span>
              </div>
              <div class="cell">
                <span class="name">所在位置：</span>
                <span class="txt"
                  >{{ hospital.provinceName }}{{ hospital.cityName
                  }}{{ hospital.districtName }}{{ hospital.address }}</span
                >
              </div>
              <div class="cell">
                <span class="name">营业执照：</span>
                <div class="txt">
                  <a
                    href="javascript:void(0)"
                    class="a_link"
                    v-if="
                      qualification.businessLicense &&
                      qualification.businessLicense.length
                    "
                    @click="previewImage(qualification.businessLicense)"
                    >点击查看</a
                  >
                  <span v-else>暂无上传</span>
                </div>
              </div>
              <div class="cell">
                <span class="name">医疗许可：</span>
                <div class="txt">
                  <a
                    href="javascript:void(0)"
                    class="a_link"
                    v-if="
                      qualification.practiceLicense &&
                      qualification.practiceLicense.length
                    "
                    @click="previewImage(qualification.practiceLicense)"
                    >点击查看</a
                  >
                  <span v-else>暂无上传</span>
                </div>
              </div>
              <!-- <div class="cell long_cell">
                <span class="name">开展项目：</span>
                <div class="txt tag_list">
                  <div class="tag" v-for="(item,index) in (hospital.expertProjects||[])" :key="`project_${index}`">
                    <li-image :src="item.icon" class="img" v-if="item.icon" />
                    <img src="@/assets/images/icon/icon_01.png" class="img" alt="" v-else>
                    <span>{{ item.name }}</span>
                  </div>
                </div>
              </div>
              <div class="cell long_cell">
                <span class="name">特色服务：</span>
                <div class="txt">
                 
                </div>
              </div> -->
            </div>

            <div
              class="outpatientIntroduce"
              v-html="surroundings.outpatientIntroduce"
            ></div>
          </div>
        </div>
        <!-- 医院信息 end -->

        <!-- 推荐医生 开始 -->
        <div class="row_box" ref="tabbar_2">
          <div class="row_head">
            <span>推荐医生</span>
            <!-- <nuxt-link to="/doctor" class="more">
              <span>更多</span>
              <i class="el-icon-arrow-right"></i>
            </nuxt-link> -->
          </div>
          <div class="row_content">
            <div class="doctor_list">
              <template v-for="(item, index) in doctorList">
                <Doctor
                  :key="`doctor_${index}`"
                  :info="item"
                  size="small"
                  v-if="index < 4"
                />
              </template>
            </div>
          </div>
        </div>
        <!-- 推荐医生 end -->

        <!-- 用户评论 开始 -->
        <div class="row_box" ref="tabbar_3">
          <div class="row_head">
            <span>用户评论</span>
            <nuxt-link
              :to="`/hospital/review?id=${hospitalId}&source=hospital`"
              class="edit_btn"
              v-if="$cookies.get('token')"
            >
              <i class="el-icon-edit"></i>
              <span>写评论</span>
            </nuxt-link>
            <nuxt-link :to="`/login`" class="edit_btn" v-else>
              <i class="el-icon-edit"></i>
              <span>写评论</span>
            </nuxt-link>
            <!-- <button class="edit_btn" @click="writeReview">
              <i class="el-icon-edit"></i>
              <span>写评论</span>
            </button> -->
          </div>
          <div class="row_content">
            <UserScore :info="totalScore" :total="commentsList.length" />
            <div class="comment_list">
              <Comment
                v-for="(item, index) in commentsList"
                :key="`comment_${index}`"
                :info="item"
              />
            </div>
          </div>
        </div>
        <!-- 用户评论 end -->
      </div>
      <!-- 左侧内容 end -->

      <!-- 右侧内容 开始 -->
      <div class="right_box">
        <!-- 社区问题 开始 -->
        <div class="problem_box">
          <div class="head">社区问题</div>
          <div class="list_box">
            <ListQuestion
              v-for="(item, index) in questionList"
              :key="`problem_${index}`"
              :info="item"
              :index="index"
            />
          </div>
        </div>
        <!-- 社区问题 end -->
      </div>
      <!-- 右侧内容 end -->
    </div>
    <!-- 内容 end -->
  </div>
</template>
<script>
import { api as viewerApi } from "v-viewer";
import "viewerjs/dist/viewer.css";
import { Rate } from "element-ui";
import TabMenus from "@/components/tabbar/index.vue";
import DetailGoods from "@/components/goods/detail.vue";
import Comment from "@/components/comment/index.vue";
import UserScore from "@/components/comment/score";
import UserCarousel from "@/components/carousel/index.vue";
import ListQuestion from "@/components/question/listCell.vue";
import {
  IMAGEURL,
  GET_HOSPITAL_INFO,
  GET_HOSPITAL_GOODS,
  GET_HOSPITAL_DOCTORS,
  GET_HOSPITAL_USERCASES,
  GET_HOSPITAL_USERCOMMENTS,
  FOLLOWED_HOSPITAL_INFO,
  GET_QUESTIONANSWER_SEARCH,
} from "@/http/interface";
export default {
  components: {
    [Rate.name]: Rate,
    TabMenus,
    DetailGoods,
    Comment,
    UserScore,
    UserCarousel,
    ListQuestion,
  },
  data() {
    return {
      tabbarList: [
        { name: "优惠活动", id: 0 },
        { name: "医院信息", id: 1 },
        { name: "医生团队", id: 2 },
        { name: "用户评论", id: 3 },
      ],
      hospitalId: "",
      oInfo: {},
      hospital: {},
      appointment: {},
      surroundings: {},
      qualification: {},
      title: "",
      description: "",
      keywords: "",
      questionList: [],
      doctorList: [],
      commentsList: [],
      goodsList: [],
      totalScore: {},
    };
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.keywords,
        },
        {
          name: "mobile-agent",
          content: "format=html5",
          url: `https://m.lilikq.com/hospital/detail/${this.hospitalId}`,
        },
      ],
      link: [
        {
          ref: "canonical",
          href: `${this.$domain}/hospital/${this.hospitalId}`,
        },
      ],
    };
  },
  async asyncData({ params, $axios }) {
    console.log(params);
    let oParams = { id: params.id };
    let res = await $axios.get(GET_HOSPITAL_INFO, {
      params: oParams,
    });
    console.log(res);

    let oInfo = res.data || {};
    let appointment = oInfo.appointment || {};
    let hospital = oInfo.hospital || {};
    let surroundings = oInfo.surroundings || {};
    let qualification = oInfo.qualification || {};

    // 社区问答
    let qes = await $axios.get(GET_QUESTIONANSWER_SEARCH, {
      params: { pageNumber: 1, pageSize: 10 },
    });
    let qbj = qes.data || {};
    let questionList = qbj.list || [];

    // 医生团队
    let des = await $axios.get(GET_HOSPITAL_DOCTORS, { params: oParams });
    let doctorList = des.data || [];

    // 用户评价
    let comes = await $axios.get(GET_HOSPITAL_USERCOMMENTS, {
      params,
      oParams,
    });
    let obj = comes.data || {};
    let commentsList = obj.list || [];
    let totalScore = obj.summary || {};

    // 商品信息
    let ges = await $axios.get(GET_HOSPITAL_GOODS, { params: oParams });
    console.log(ges);
    let goodsList = ges.data || [];

    return {
      oInfo,
      hospitalId: params.id,
      appointment,
      hospital,
      surroundings,
      qualification,
      title: hospital.seoTitle,
      keywords: hospital.seoKeywords,
      description: hospital.seoDescription,
      questionList,
      goodsList,
      doctorList,
      // caseList,
      commentsList,
      totalScore,
    };
  },
  methods: {
    // 动态获取className
    getClassName(index) {
      if (index % 3 == 0) {
        return "";
      }
      if (index % 3 == 1) {
        return "blue";
      }
      if (index % 3 == 2) {
        return "dark_blue";
      }
    },

    // 获取图片列表
    getImages(str) {
      if (!str) {
        return [];
      }
      let list = str.split(",");
      console.log(list);
      return list;
    },

    // 监听菜单点击
    onTabbarChange(e) {
      let _dom = this.$refs["tabbar_" + e];
      if (_dom) {
        _dom.scrollIntoView();
      }
    },

    // 关注
    async attention() {
      let token = this.$cookies.get("token");
      if (!token) {
        this.$router.push({
          path: "/login",
        });
        return false;
      }
      let _status = this.hospital.followedStatus;
      let id = this.hospitalId;
      let params = { id: id };
      let res = await this.$axios.get(FOLLOWED_HOSPITAL_INFO, {
        params: params,
      });
      if (res.code == 200) {
        this.$set(this.hospital, "followedStatus", _status == 1 ? 2 : 1);
        this.$set(this.oInfo, "followedStatus", _status == 1 ? 2 : 1);
      }
    },

    // 去预约
    goBook() {
      let params = {};
      params.id = this.hospitalId;
      params.source = "hospital";
      this.$routerPush("/appoint", params);
    },

    // 写评论
    writeReview() {
      let params = {};
      params.id = this.hospitalId;
      params.source = "hospital";
      this.$routerPush("/hospital/review", params);
    },

    // 预览图片
    previewImage(list) {
      let imageList = [];
      list.map((k) => {
        imageList.push(IMAGEURL + k);
      });
      viewerApi({
        images: imageList,
        options: {
          zIndex: 99999,
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/hospital/detail.less";
</style>